<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" shadow background-color="rgb(107,60,94)" status-bar left-icon="left"
			left-text="返回" title="个人机位预约" @clickLeft="back" />

		<!-- <uni-combox :border="false" :candidates="candidates" placeholder="请输入或选择教学楼" class="choose"> -->
		<!-- </uni-combox> -->
		<view class="example-body">
			<uni-forms>
				<uni-title type="h1" title="选择教学楼"></uni-title>
				<!-- <uni-row class="demo-uni-row">
					<uni-col :span="12" v-for="item in candidates" class="state-btn-content">
					<uni-data-checkbox selectedColor="rgb(107,60,94)" mode="tag" :localdata="candidates"></uni-data-checkbox>
					</uni-col>
				</uni-row>
 -->
				<uni-row class="demo-uni-row">
					<uni-col :span="12" v-for="item in candidates" class="state-btn-content">
						<!-- <button type="default" style="margin: 5px;">{{item}}</button> -->
						<button style="margin: 5px;" :class="active == item ? 'choose':'active'" type="default"
							@click="buildchoose(item)">{{item}}</button>
					</uni-col>
				</uni-row>
				<view v-show="true" class="uni-pb-5">
					<uni-title type="h1" title="选择日期&时间"></uni-title>
					<text style="color: #BBBBBB;">tips:只开放提前三天的预约噢！！</text>
					<view>
						<uni-segmented-control :current="current" :values="currentDate" @clickItem="onClickItem"
							styleType="button" activeColor="rgb(107,60,94)"></uni-segmented-control>
						<view
							style="margin-top: 10px;align-items: center;justify-content: center; ">
							<view v-show="current === 0">
								<!-- {{currentDate}} -->

								<uni-data-checkbox multiple mode="button" :localdata="times"
									selectedColor="rgb(107,60,94)"  ></uni-data-checkbox>

							</view>
							<view v-show="current === 1">
								<uni-data-checkbox multiple mode="button" :localdata="times"
									selectedColor="rgb(107,60,94)"  ></uni-data-checkbox>
							</view>
							<view v-show="current === 2">
								<uni-data-checkbox multiple mode="button" :localdata="times"
									selectedColor="rgb(107,60,94)"   ></uni-data-checkbox>
							</view>
						</view>
					</view>
					<!-- <uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" /> -->

				</view>

				<view v-show="true">
					<uni-title type="h1" title="选择机房/机位"></uni-title>
					<uni-data-picker placeholder="请选择机房/机位" popup-title="请选择机房/机位" :localdata="dataTree"
						v-model="classes" color="rgb(107, 60, 94)">
					</uni-data-picker>
				</view>



			</uni-forms>
			<navigator url="../reserve/tip_success"><button type="default" class="btn">确定</button></navigator>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				active: '',
				currentDate: this.GetTime(),
				candidates: ["学武楼", "文宣楼", "坤銮楼", "大漏特楼", "逸夫楼", "周隆泉楼"],
				// candidates: [{
				// 	text: '学武楼',
				// 	value: 0
				// }, {
				// 	text: '文宣楼',
				// 	value: 1
				// }, {
				// 	text: '大漏特楼',
				// 	value: 2
				// },{
				// 	text:'alfiowigas',
				// 	value:3
				// },{
				// 	text:'jawihgawoi',
				// 	value:4
				// }],
				times: [{
					text: '8:00 - 9:30  ',
					value: 0
				}, {
					text: '9:30 - 11:00  ',
					value: 1
				}, {
					text: '11:00 - 12:30  ',
					value: 2
				}, {
					text: '12:30 - 14:00  ',
					value: 3
				}, {
					text: '14:00 - 15:30  ',
					value: 4
				}, {
					text: '15:30 - 17:00  ',
					value: 5
				}, {
					text: '17:00 - 18:30',
					value: 6
				}, {
					text: '18:30 - 20:00',
					value: 7
				}, {
					text: '20:00 - 21:30',
					value: 8
				}, {
					text: '21:00 - 10:30',
					value: 9
				}],
				date: new Date(),

				gutter: 0,
				nvueWidth: 730,
				classes: '1-2',
				dataTree: [{
						text: "A101",
						value: "1-0",
						children: [{
								text: "1号位",
								value: "1-1"
							},
							{
								text: "2号位",
								value: "1-2"
							}
						]
					},
					{
						text: "A102",
						value: "2-0",
						children: [{
								text: "1号位",
								value: "2-1"
							},
							{
								text: "2号位",
								value: "2-2"
							}
						]
					},
					{
						text: "A103",
						value: "3-0",
						disable: true
					}
				],
				datetimerange: [],
				current: 0


			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			clickLeft() {
				uni.showToast({
					title: '左侧按钮'
				})
			},
			selectState(e) {
				this.whichSelected = e.currentTarget.dataset.state
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			buildchoose(item) {
				this.active = item;
			},
			GetTime() {
				var date = new Date();
				var base = Date.parse(date); // 转换为时间戳
				var year = date.getFullYear(); //获取当前年份
				var mon = date.getMonth() + 1; //获取当前月份
				var day = date.getDate(); //获取当前日
				var oneDay = 24 * 3600 * 1000
			
			
				var daytimeArr = [];
			
				var now = new Date(base);
				var myear = now.getFullYear();
				var month = now.getMonth() + 1;
				var mday = now.getDate()
				daytimeArr.push([myear, month >= 10 ? month : '0' + month, mday >= 10 ? mday : '0' + mday].join('-'))
			
				for (var i = 1; i < 3; i++) { //前七天的时间
					var now = new Date(base += oneDay);
					var myear = now.getFullYear();
					var month = now.getMonth() + 1;
					var mday = now.getDate()
					daytimeArr.push([myear, month >= 10 ? month : '0' + month, mday >= 10 ? mday : '0' + mday].join('-'))
				}
				return daytimeArr
			}
		},

	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.container {
		font-size: 14px;
		line-height: 24px;
		padding: 0 2 2 2px;
	}

	.choose {
		color: #FFFFFF;
		background-color: rgb(107, 60, 94);

	}

	.btn {
		background-color: rgb(107, 60, 94);
		color: white;
		margin-top: 50rpx;
	}

	/* unirow用到的style */
	.demo-uni-row {
		margin-bottom: 10px;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	/deep/ .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 4px;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

	/*教学楼按钮*/
	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;

	}

	.uni-pb-5 {
		padding-bottom: 5px;
		flex: auto;
	}
</style>
<style lang="scss">
	.example-body {
		padding: 12px;
		background-color: #FFFFFF;
	}
</style>
